<template>
  <div class="address">
    <template v-if="queueTablePages.total !== 0">
      <div class="search">
        <QuickSearch :advForm="quickSearchForm" @QuickSearch="queryList"></QuickSearch>
        <div>
          <el-button type="primary" size="mini" @click="refreshClick">刷新</el-button>
          <el-button size="mini" @click="addAgent">添加成员</el-button>
          <el-button type="primary" size="mini" @click="queryList">查询</el-button>
        </div>
      </div>
      <instiutionTable ref="tableRef"
                          class="instiutionTable"
                          :pages="queueTablePages"
                          :instiutionTableData="queueTableData"
                          :instiutionTableHeader="tableHeader"
                          @sizeChange="sizeChange"
                          @currentChange="currentChangeFun">
                          <template #agentId="{ scope }">
                            <m7Select size="mini"
                              v-model="scope.row.agentId"
                              @nodeClick="searchFun"
                              @nodeClear="searchFun"
                              placeholder="请选择" filterable
                              :options="userList"
                              :row="scope.row"
                              :defaultProps="{label: 'agentName', value: '_id'}"
                              :clearable="true">
                            </m7Select>
                          </template>
          </instiutionTable>
    </template>
    <div style="text-align: center;" v-else>
      <div class="tip">关联通讯录后，会将系统中已经录入的成员信息与「企业微信通讯录」相关联，<br/>请确认已经在本系统【设置 - 组织架构 - 座席】录入了成员信息。</div>
      <el-button type="primary" size="mini" @click="refreshClick" style="margin-top: 16px;">关联企微通讯录</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common/index'
@Component({
  name: 'AddressComp',
  components: {
    instiutionTable,
    QuickSearch
  }
})
export default class Address extends Vue {
  [x: string]: any
  private queueTablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 0
  }

  private tableHeader: any[] = [ // 表头
    { label: '姓名', prop: 'name' },
    { label: '部门', prop: 'deptName' },
    { label: '手机', prop: 'mobile' },
    { label: '邮箱', prop: 'email' },
    { label: '关联系统成员', prop: 'agentId', custom: true }
  ]

  public queueTableData = []

  private quickSearchForm = {
    form: {
      sysSearch: '',
      search: '',
      relate: ''
    },
    advSearchOptions: [
      { label: '企微通讯录', inputType: 'input', placeholder: '请输入员工姓名/部门', name: 'search' },
      { label: '系统成员', inputType: 'input', placeholder: '请输入成员名称/工号', name: 'sysSearch' },
      { label: '是否关联', inputType: 'select', multiple: false, clearable: true, selectData: [{ label: '已经关联', value: true }, { label: '未关联', value: false }], name: 'relate', defaultProp: { label: 'label', value: 'value' } }
    ]
  }

  private sizeChange (size: number) {
    this.queueTablePages.pageSize = size
    this.queryList()
  }

  private addAgent () {
    this.$router.push('/setting_center/index/user_management')
  }

  private searchFun (agentId: any, row: any) {
    const { userId, accountId } = row
    commonAction({
      url: '/server-public/action/wx-suite/bind-relation',
      method: 'post',
      data: { accountId, agentId, userId }
    }).then(res => {
      if (!res.success) {
        row.agentId = ''
        this.$message.error('绑定失败')
      }
    })
  }

  private refreshClick () {
    commonAction({
      url: '/server-public/action/wx-suite/refresh-relation',
      method: 'post'
    }).then(res => {
      if (res.success) {
        this.$message.success('数据正在同步中，请两分钟之后查看最新的通讯录')
        this.queryList()
      }
    })
  }

  private currentChangeFun (page: number) { // 搜素
    this.queueTablePages.current = page
    this.queryList()
  }

  public get userList () {
    return CommonModule.publicCache.userList
  }

  private queryList (addSuccess?: any) {
    const params = {
      page: {
        pageNumber: this.queueTablePages.current,
        pageSize: this.queueTablePages.pageSize
      },
      ...this.quickSearchForm.form
    }
    commonAction({
      url: '/server-public/action/wx-suite/relation-info',
      method: 'post',
      data: { ...params }
    }).then(res => {
      if (res.success) {
        const list = res.data.userList || []
        const total = res.data.page.total
        this.queueTableData = list
        this.queueTablePages.total = total
      }
    })
  }

  private mounted () {
    this.queryList()
  }
}
</script>
<style lang="stylus" scoped>
.tip {
  line-height: 20px;
  color: rgba(0,0,0,0.8);
}
.address {
  margin: 24px;
  background: #FEFEFE;
  border: 1px solid #E7E9ED;
  border-radius: 4px;
  padding: 24px;
  height: calc(100vh - 290px);
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
